<template>
	<view class="content">

		<!-- <view class="login_img"><image mode="aspectFill" src="/static/image/iamhe.png"></image></view> -->

		<view class="login_from">

			<view class="login_from_input">
				<view class="login_from_name">账号</view>
				<view class="login_from_fun"><input type="text" placeholder="请输入账号" v-model="userInfo.uid">
				</view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">密码</view>
				<view class="login_from_fun"><input type="digit" password="true" placeholder="请输入登录密码"
						v-model="userInfo.password"></view>
			</view>


			<view class="toOther">
				<view class="forget">
					<!-- 忘记密码 -->
				</view>
				<view class="register" @click="toRegister">
					注册
				</view>
			</view>
			<view class="login_from_dl">
				<button @click="denglu">登录</button>
			</view>

			<view class="logo_xieyi">
				<label @click="moutcl" :class="gouxSta?'cuIcon-squarecheckfill':'cuIcon-square'"></label>
				<view class="logo_text">请勾选并阅读<text>《用户协议》</text>及<text>《隐私协议》</text></view>
			</view>

		</view>

	</view>
</template>
<script>
	import {
		setToken
	} from '@/request/auth.js'
	import {
		login
	} from '@/request/api.js'

	export default {

		data() {
			return {
				gouxSta: false,
				Qztime: '',
				QzyzmStare: false,
				Qztext: '获取验证码',
				userInfo: {
					uid: '',
					password: ''
				}

			}
		},
		onLoad() {},
		methods: {
			toRegister() {
				uni.navigateTo({
					url: '../Register/Register'
				})
			},
			moutcl() {
				if (this.gouxSta == false) {
					this.gouxSta = true
				} else {
					this.gouxSta = false
				}
			},

			denglu() {
				if (this.gouxSta == false) {
					uni.showToast({
						"title": "请阅读并勾选用户协议",
						"icon": 'none'
					})
				} else {
					// login(this.userInfo).then(res => {
					// 	console.log(res);
					// 	if (res.code === 200) {
					// 		uni.setStorageSync('name', res.name);
					// 		uni.setStorageSync('uid', res.uid);
					// 		setToken('111111')
					// 		uni.switchTab({
					// 			url: '/pages/index/index'
					// 		})

					// 	} else {
					// 		uni.showToast({
					// 			"title": "账号或密码错误",
					// 			"icon": 'none'
					// 		})
					// 	}
					// })
					
					uni.request({
						url: 'http://localhost:3031/login',
						data: this.userInfo,
						method: 'POST',
						success: (res) => {
							console.log(res);
							if (res.data.code === 200) {
								uni.setStorageSync('name', res.data.name);
								uni.setStorageSync('uid', res.data.uid);
								setToken('111111')
								uni.switchTab({
									url: '/pages/index/index'
								})
					
							} else {
								uni.showToast({
									"title": "账号或密码错误",
									"icon": 'none'
								})
							}
						},
						fail: (err) => {
							console.log(err)
						}
					})
					// uni.setStorageSync('name', 123);
					// uni.setStorageSync('uid', 456);
					// setToken('111111')
					// uni.switchTab({
					// 	url: '/pages/index/index'
					// })
					
				}

			},


			Qzyzm() {
				var num = 60;
				if (this.QzyzmStare == false) {
					this.Qztime = '60';
					this.Qztext = 's后获取';
					this.QzyzmStare = true;
					var interval = setInterval(() => {
						--this.Qztime
					}, 1000)
					setTimeout(() => {
						clearInterval(interval)
						this.Qztext = '获取验证码'
						this.Qztime = ''
						this.QzyzmStare = false
					}, 60000)
				}
			},





			handleCancel(e) {
				console.log('cancel::', e)
			}

		}
	}
</script>
<style lang="less" scoped>
	page {
		background: #fff;
	}

	.content {
		padding-top: 200rpx;
	}

	.login_img {
		width: 100%;
		height: auto;
		margin-top: 90upx;
	}

	.login_img image {
		width: 170upx;
		height: 170upx;
		display: block;
		margin: 0px auto;
		border-radius: 50%;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20upx 8%;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.login_from_fun input {
		width: 100%;
		text-align: left;
		font-size: 14px;
	}

	.toOther {
		margin-top: 20rpx;
		width: 95%;

		.forget {
			display: inline-block;
			width: 50%;
			color: #8f8f8f;
		}

		.register {
			display: inline-block;
			text-align: right;
			width: 50%;
			color: #8f8f8f;
		}
	}


	.login_from_dl {
		width: 100%;
		height: 50px;
		line-height: 50px;
		margin-top: 80upx;
	}

	.login_from_dl button {
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #2a82e4;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
		align-items: center;
		color: #444;
		font-size: 14px;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 18px;
		margin-right: 1%;
		display: block;
		width: 15px;
		height: 15px;
	}

	.cuIcon-squarecheckfill {
		color: #FF3B00;
	}

	.logo_text text {
		color: #FF3B00;
	}

	.getyzm {
		width: 60%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		color: #FF3B00;
	}

	.cuicon {
		font-size: 18px;
	}

	.regFrom_tom_yzlabel {
		width: 60%;
		text-align: right;
	}

	.cuIcon-squarecheckfill {
		background: #FF3B00;
		position: relative;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}

	.cuIcon-square {
		background: #fff;
		border: 2px #ccc solid;
		box-sizing: border-box;
		border-radius: 3px;
	}
</style>
